<script setup lang="ts">
import { ref, watch, computed, onMounted, onUnmounted } from 'vue'
import { getColWidth, setLastWidth } from '@/utils/FormatData'
const props = defineProps(['data', 'cols'])
const list = ref<any[]>([])
const colNum = ref(0)
const currentEnv = import.meta.env.DEV
const baseURL = window.location.origin
watch(
  () => props.data,
  (val) => {
    list.value = val
    // const len = list.value.length
    // if (len) {
    //   stopAutoPlay()
    //   currentPage.value = 0
    //   len > 10 &&
    //     setTimeout(() => {
    //       startAutoPlay()
    //     }, 0)
    // }
  }
)
const dialogVisible = ref(false)
const dialogImage = ref('')
const boxRef = ref()
const column = ref()
watch(
  () => props.cols,
  (val) => {
    colNum.value = val.length
    const boxWidth = boxRef.value?.offsetWidth
    if (props.cols.length) {
      column.value = getColWidth(props.cols, boxWidth)
      setLastWidth(column.value, boxWidth)
    }
  }
)

// 每页显示的条目数量
const pageSize = 10
const currentPage = ref(0)

// 数据分页
const paginatedData = computed(() => {
  const pages: Array<typeof list.value> = []
  for (let i = 0; i < list.value.length; i += pageSize) {
    pages.push(list.value.slice(i, i + pageSize))
  }
  return pages
})
// 当前页的数据
const currentPageData = computed(() => {
  return paginatedData.value[currentPage.value] || []
})

// 自动轮播
let interval: NodeJS.Timeout | null = null

const startAutoPlay = () => {
  interval = setInterval(() => {
    nextPage()
  }, 5000) // 每5秒切换一次
}

const stopAutoPlay = () => {
  if (interval) {
    clearInterval(interval)
    interval = null
  }
}

// 切换到下一页
const nextPage = () => {
  currentPage.value = (currentPage.value + 1) % paginatedData.value.length
}

// 切换到上一页
const prevPage = () => {
  currentPage.value =
    (currentPage.value - 1 + paginatedData.value.length) % paginatedData.value.length
}

const mouseenter = () => {
  list.value.length > 10 && stopAutoPlay()
}

const mouseleave = () => {
  list.value.length > 10 && startAutoPlay()
}
const getImageUrl = (list: any) => {
  if(currentEnv){
    return new URL(`/src/assets/assyImages/${list.ImageName}.png`, import.meta.url).href
  } else {
    return `${baseURL}/assyImages/${list.ImageName ? list.ImageName : '1-0-1'}.png`
  }
}
const preview = (list: any) => {
  dialogImage.value = getImageUrl(list)
  dialogVisible.value = true
}
// 生命周期钩子
// onMounted(() => {
//   list.value.length && startAutoPlay()
// })
onUnmounted(stopAutoPlay)
</script>
<template>
  <div ref="boxRef" class="scroll-box row-box-content table-box" style="width: 100%">
    <div class="table-head-box">
      <p v-for="(item, index) in column" :key="index" :style="{ width: item.width + 'px' }">
        {{ item.label }}
      </p>
    </div>
    <div v-if="list.length" class="carousel-container">
      <!-- 当前分页内容 -->
      <div class="carousel-page">
        <div v-for="item in list" :key="item.id" class="carousel-item">
          <template v-for="(colItem, colIndex) in column" :key="colIndex">
            <template v-for="(keyItem, keyIndex) in Object.keys(item)" :key="keyIndex">
              <template v-if="keyItem == colItem.value">
                <span v-if="keyItem == 'ImageName'" :style="{ width: colItem.width + 'px' }">
                  <img @click="preview(item)" :src="getImageUrl(item)" alt="" style="width: 40px;margin: 0 auto">
                </span>
                <span v-else :title="item[colItem.value]" :style="{ width: colItem.width + 'px' }">{{ item[colItem.value] }}</span>
              </template>
            </template>
          </template>
        </div>
      </div>
      <el-dialog
        title="图片预览"
        v-model="dialogVisible"
        width="40%"
        center
      >
        <img :src="dialogImage" alt="" style="width: 100%; height: auto;">
      </el-dialog>
      <!-- 控制按钮 -->
<!--      <div class="carousel-controls">-->
<!--        <button @click="prevPage">上一页</button>-->
<!--        <button @click="nextPage">下一页</button>-->
<!--      </div>-->
    </div>
    <div v-else class="flex justify-center my-empty-data"><p>暂无数据</p></div>
  </div>
</template>
<style lang="less" scoped>
::-webkit-scrollbar {
  width: 12px;
  background-color: transparent;
}

::-webkit-scrollbar-track {
  background-color: transparent;
}

::-webkit-scrollbar-thumb {
  background-color: rgba(0, 0, 0, 0.2);
  border-radius: 6px;
  border: 3px solid transparent;
  background-clip: content-box;
}

::-webkit-scrollbar-thumb:hover {
  background-color: rgba(0, 0, 0, 0.3);
}
.my-empty-data {
  height: 380px;
  line-height: 380px;
  font-size: 20px;
}
.carousel-container {
  padding-top: 44px;
  width: 100%;
  overflow: hidden;
}

.carousel-page {
  display: flex;
  flex-direction: column;
}
.scroll-box{
  height: 390px;
  .table-head-box{
    position: fixed;
    p{
      padding:5px 0;
      font-size: 22px;
    }
  }
}
.carousel-item {
  display: flex;
  font-size: 22px;
  color: #8FE1FF;
  text-align: center;
  height: 50px;
  line-height: 40px;
  &:nth-child(even) {
    background: rgba(19, 25, 82);
  }
  &:nth-child(odd) {
    background: rgba(6, 13, 73);
  }
  &:hover {
    background: #182758;
  }
  span{
    display: inline-block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    padding:5px;
  }
}

.carousel-controls {
  display: none;
  margin-top: 16px;
}
</style>
